<template>
    <div class="dashboard-container dashboard-wrapper">

        <el-row :gutter="20">
            <el-col :span="6">
                <el-row>
                    <el-col :span="24" class="wrapper">
                        <data-card
                                idName="user_created_count"
                                :endVal="count.createUser"
                                info-text="今日新增用户"
                                iconType="el-icon-mars-personadd"
                                color="#2d8cf0"
                        ></data-card>
                    </el-col>
                </el-row>
            </el-col>

            <el-col :span="6">
                <el-row>
                    <el-col :span="24" class="wrapper">
                        <data-card
                                idName="visit_count"
                                :endVal="count.visit"
                                info-text="今日浏览量"
                                iconType="el-icon-mars-activity"
                                color="#64d572"
                        ></data-card>
                    </el-col>
                </el-row>
            </el-col>

            <el-col :span="6">
                <el-row>
                    <el-col :span="24" class="wrapper">
                        <data-card
                                idName="collection_count"
                                :endVal="count.collection"
                                info-text="今日数据采集量"
                                iconType="el-icon-mars-coupons"
                                color="#ffd572"
                        ></data-card>
                    </el-col>
                </el-row>
            </el-col>

            <el-col :span="6">
                <el-row>
                    <el-col :span="24" class="wrapper">
                        <data-card
                                idName="transfer_count"
                                :endVal="count.transfer"
                                info-text="今日服务调用量"
                                iconType="el-icon-mars-shenfenzheng"
                                color="#f25e43"
                        ></data-card>
                    </el-col>
                </el-row>
            </el-col>

        </el-row>

        <el-row class="margin-top-10">
            <el-col>
                <demo1></demo1>
            </el-col>
        </el-row>


    </div>
</template>

<script>
    import {mapGetters} from 'vuex'
    import countTo from 'vue-count-to'
    import DataCard from "./components/DataCard";
    import Demo1 from "./components/charts/Demo1";
    import Demo2 from "./components/charts/Demo2";
    import Demo3 from "./components/charts/Demo3";


    export default {
        name: 'dashboard',
        components: {
            Demo3,
            Demo2,
            Demo1,
            DataCard,
            countTo},
        data() {
            return {
                count: {
                    createUser: 496,
                    visit: 3264,
                    collection: 24389305,
                    transfer: 39503498
                },
            }
        },
        computed: {
            ...mapGetters(['user', 'location'])
        },
        created() {
            //获取用户IP所在位置
            this.$store.dispatch('GetIpCity').then(() => {})
        }
    }
</script>

<!-- 局部样式 -->
<style rel="stylesheet/scss" lang="scss" scoped>
    .wrapper{
        font-size: 14px;
        position: relative;
        transition: all .2s ease-in-out;
        &:hover {
            box-shadow: 1px 3px 10px rgba(0, 0, 0, .2);
            border-color: #eee;
        }
    }
</style>